<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机点名案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h2 {
            text-align: center; /* 文字水平居中 */
        }

        .点名版面 {
            width: 600px; /* 宽，高随内容撑开 */
            margin: 50px auto; /* 版心居中 */
            display: flex; /* flex布局 */
            font-size: 25px; /* 文字大小 */
            line-height: 40px; /* 文字行高 */
        }

        .姓名 {
            width: 450px; /* 宽高 背景色 */
            height: 40px;
            color: red;
        }

        .按钮区域 {
            text-align: center; /* 水平居中 */
        }

        .按钮区域 button {
            width: 120px; /* 宽高 */
            height: 35px;
            margin: 0 50px; /* 内边距：上下 左右， 效果2个按钮有间隔 */
        }
    </style>
</head>
<body>
<p>
    业务分析： <br>
    ① 点击开始按钮随机抽取数组的一个数据，放到页面中 <br>
    ② 点击结束按钮删除数组当前抽取的一个数据 <br>
    ③ 当抽取到最后一个数据的时候，两个按钮同时禁用（写点开始里面，只剩最后一个数据不用抽了 ） <br>
    核心：利用定时器快速展示，停止定时器结束展示
</p>
<hr>


<h2>随机点名</h2>
<div class="点名版面">
    <span>名字是：</span>
    <div class="姓名">这里显示姓名</div>
</div>
<div class="按钮区域">
    <button class="开始按钮">开始</button>
    <button class="结束按钮">结束</button>
</div>

<script>
    /*
    特别说明: 我这里 事件监听 定时器 里,的函数都是用的匿名函数
    因为我使用有名函数,有BUG了. 点开始可以循环,点结束不能停止点名.
    原因是函数不断调用,造成在函数里的 定时器编号 不断变, 关闭定时器语法 无法真正关闭定时器
    匿名函数只调用一次,赋值的 编号 不会改变, 关闭定时器语法 可以更加定时器编号,改变定时器
     */
    // 数据数组
    const 姓名数组 = ['孙新罡', '张岩', '张凯', '张航天', '安道华', '杜岩']

    // 获取DOM元素
    const 开始按钮 = document.querySelector('.按钮区域 .开始按钮')
    const 结束按钮 = document.querySelector('.按钮区域 .结束按钮')
    const 姓名 = document.querySelector('.点名版面 .姓名')

    // 全局变量
    let 定时器_编号 = 0
    let 随机_下标 = 0

    // 元素添加 事件监听。 点击按钮 随机点名
    // 匿名函数嵌套 匿名函数
    开始按钮.addEventListener('click', function () {
            //定时器，赋值一个变量. 用来存储 定时器编号
            定时器_编号 = setInterval(function () {
                随机_下标 = Math.floor(Math.random() * 姓名数组.length) // 获取一个随机数,作为数组的下标
                姓名.innerHTML = 姓名数组[随机_下标] // 元素 修改标签里的文本
            }, 100);
        }
    )

    // 元素添加 事件监听。 点击按钮 结束点名
    结束按钮.addEventListener('click', function () {
        clearInterval(定时器_编号) // 关闭定时器
        姓名数组.splice(随机_下标, 1) // 我们的要求是,显示到的姓名不在重复出现

        // 当只有一个姓名的时候, 禁用按钮 不在使用
        if (姓名数组.length === 1) {
            开始按钮.disabled = true // 禁用按钮 状态, true(真)
            结束按钮.disabled = true
        }

        console.log(姓名数组) // 控制台看 数组是否删除相应的姓名
        console.log(`定时器_编号: ${定时器_编号}`) // 控制台看 定时器序列号
    })


</script>


</body>
</html>